<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
          padding: 0;
          margin: 0;
          list-style: none;
          border: 0;
        }
    
        .all {
          width: 500px;
          height: 200px;
          padding: 7px;
          border: 1px solid #ccc;
          margin: 100px auto;
          position: relative;
        }
    
        .screen {
          width: 500px;
          height: 200px;
          overflow: hidden;
          position: relative;
        }
    
        .screen li {
          width: 500px;
          height: 200px;
          overflow: hidden;
          float: left;
        }
    
        .screen ul {
          position: absolute;
          left: 0;
          top: 0px;
          width: 3000px;
        }
    
        .all ol {
          position: absolute;
          right: 10px;
          bottom: 10px;
          line-height: 20px;
          text-align: center;
        }
    
        .all ol li {
          float: left;
          width: 20px;
          height: 20px;
          background: #fff;
          border: 1px solid #ccc;
          margin-left: 10px;
          cursor: pointer;
        }
    
        .all ol li.current {
          background: #DB192A;
        }
    
        #arr {
          display: none;
        }
    
        #arr span {
          width: 40px;
          height: 40px;
          position: absolute;
          left: 5px;
          top: 50%;
          margin-top: -20px;
          background: #000;
          cursor: pointer;
          line-height: 40px;
          text-align: center;
          font-weight: bold;
          font-family: '黑体';
          font-size: 30px;
          color: #fff;
          opacity: 0.3;
          border: 1px solid #fff;
        }
    
        #arr #right {
          right: 5px;
          left: auto;
        }
    </style>
    
        
</head>
<body>
    <div class="all" id='box'>
        <div class="screen"><!--相框-->
            <ul>
                <li><img src="images/1.jpg" width="500" height="200"/></li>
                <li><img src="images/2.jpg" width="500" height="200"/></li>
                <li><img src="images/3.jpg" width="500" height="200"/></li>
                <li><img src="images/4.jpg" width="500" height="200"/></li>
                <li><img src="images/5.jpg" width="500" height="200"/></li>
            </ul>
            <ol></ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
              
    <script>
    var box = document.getElementById('box');
    var screen = box.children[0];
    var imgWidth = screen.offsetWidth;
    var ulObj = screen.children[0];
    var list = ulObj.children;
    var olObj = screen.children[1];
    var arr = document.getElementById('arr');

    var index = 0;
    //创建小圆点
    for(var i=0;i<list.length;i++){
        //创建li,加入到ol
        var liObj = document.createElement('li');
        olObj.appendChild(liObj);
        liObj.innerHTML=(i+1);
        liObj.setAttribute("index",i);
        olObj.children[0].className="current";
        liObj.onmouseover = function(){
            for(var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute('class');
            }
            this.className="current";
            index = this.getAttribute('index');
            animation(ulObj,-index*imgWidth);
        }
    }

    //克隆一个ul中第一个li,加入到ul中的最后=====克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    //自动播放
    var timer = setInterval(next,2000);

    //鼠标进入按钮出现
    box.onmouseover=function(){
        arr.style.display="block";
        clearInterval(timer);
    }

    //鼠标离开按钮消失
    box.onmouseout=function(){
        arr.style.display="none";
        timer = setInterval(next,2000);
    }

    //右边按钮
    document.getElementById('right').onclick=next;
    function next(){
        if(index == list.length-1){
            index = 0;
            ulObj.style.left = 0+'px';
        }
        index++;
        animation(ulObj,-index*imgWidth);
        if(index == list.length-1){
            olObj.children[olObj.children.length - 1].className = "";
            olObj.children[0].className="current";
        }else{
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[index].className = "current";
        }
    }

    //左边按钮
    document.getElementById('left').onclick=function(){
        if(index == 0){
            index = 5;
            ulObj.style.left = -index*imgWidth+'px';
        }
        index--;
        animation(ulObj,-index*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        olObj.children[index].className = "current";
    }

    function animation(element,target){
        clearInterval(element.timer);
        element.timer=setInterval(function(){
            var current = element.offsetLeft;
            var step = 10;
            step=current<target?step:-step;
            current+=step;
            if(Math.abs(target-current)>Math.abs(step)){
                element.style.left = current+'px';
            }else{
                clearInterval(element.timer);
                element.style.left = target+'px';
            }
        },20)
    }
    
    </script>           
</body>
</html>